<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
 <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
 <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
 <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
 <link href="../../ico.ico" rel="icon" type="image/x-icon" />
  
</head>
      <script type="text/javascript">

      	$(function  () {
      		
      		
      	 var ws = new WebSocket("ws://127.0.0.1:80");

                  ws.onopen = function(e) {

                          $('#sub').click(function  () {
                          	 var data={}
	                          data.group="0"
	                          data.name='bobo3'
	                          data.toname='bobo'
	                          data.message=$('#text').val()
	                          data=JSON.stringify(data)
	      			          ws.send(data);
      			            
      		              })
                     
                          

			    }
                  

               ws.onmessage = function (evt) 
               { 

                   var received_msg = JSON.parse(evt.data);
                  console.log(received_msg,received_msg.toname)
                  if(received_msg.toname=="bobo3"){
                  	let message=received_msg.message
                        name=received_msg.name
                        
                     $('#show').html(received_msg.name+'说'+received_msg.message)

                  }

//              
               };
 
//             ws.onclose = function()
//             { 
//                // 关闭 websocket
//                alert("连接已关闭..."); 
//             };
                 ws.onerror = function(event) {
		              console.log(event)
				};
               
//          }
//          
//          else
//          {
//             // 浏览器不支持 WebSocket
//             alert("您的浏览器不支持 WebSocket!");
//          }
         
         
         })
      </script>
        
   <body>
       
      <div id="show"></div>
      
      <div id="sse">
         
          <input type="text" value="" id="text"/>  
          <input type="button" value="提交" id="sub"/>
      </div>
      <script type="text/javascript">
  
      </script>
   </body>

</html>